<template>
  <Header :addList="addList"></Header>
  <List :todoList = "todoList" :addList="addList" :delList="delList"
    :changeStatu="changeStatu"
  ></List>
  <Footer :todoList="todoList" :chooseAll="chooseAll" :chooseNone="chooseNone"></Footer>
  <hr>
</template>

<script lang="ts">
// 引入各个组件
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import List from './components/List.vue';
import { reactive } from 'vue';
// import interfaceList from './uitls/interface';
import {saveLocalStorage, readLocalStorage} from './uitls/localstorage'
export default {
  name: 'App',
  components: {
    Header,
    Footer,
    List
  },
  setup() {
    let storageList = JSON.parse(readLocalStorage())
    let todoList = reactive(storageList)
    // add_data
        
    const addList = (val) => {
      todoList.unshift(val)
      saveLocalStorage(todoList)
    }
    
    // del_list
    const delList = (index) => {
      todoList.splice(index, 1)
      saveLocalStorage(todoList)

    }

    // change status
    const changeStatu = (index) => {
      todoList.forEach((item, subIndex) => {
        if (index === subIndex) item.isSelect = !item.isSelect
      })
      saveLocalStorage(todoList)
    }
    // choose_all_list
    const chooseAll = () => {
      todoList.forEach((item, index) => {
        item.isSelect = true
      })
      saveLocalStorage(todoList)
    }
    const chooseNone = () => {
      todoList.forEach((item, index) => {
        item.isSelect = false
      })
      saveLocalStorage(todoList)
    }
    return {
      todoList,
      addList, // add_list
      delList, // del_list
      changeStatu, // change_list_status
      chooseAll,
      chooseNone
    }
  }
}
</script>
